<template>
  <s-layout class="chat-wrap"
            color="#000000"
            backgroundColor="#FFFFFF"
            navbar="inner"
            :title="page.options.type == 1 ? `${state.title}英烈动态详情` : `${state.title}姓始祖动态详情`"
            :mainBackground="'#FFFFFF'"
            :is_main-body="true"
            :customBody="customBody()"
            :is_mainBody="false"
            :bg-style="{color:'#F5F5F5'}"
            :is_back="true"
  >
    <view class="wh_750">
      <su-tabs id="suTabs" class="suTabs" :class="`tabs_${state.current}`"
               :list="state.listHeader"
               lineColor="rgb(255,66,6)"
               :current="state.current"
               :scrollable="false"
               :itemStyle="itemStyle()"
               :activeStyle="activeStyle()"
               :inactiveStyle="inactiveStyle()"
               @change="onChange"
      />
      <swiper :style="{
        height: `calc(100vh - ${upx2px(80) + state.statusHeight}px)`
      }" :current="state.current" @change="swiperChange">
        <!-- 爱心列表 -->
        <swiper-item :style="{
          height: `calc(100vh - ${upx2px(80) + state.statusHeight}px)`
        }">
          <loveList :ancestorLoveList="ancestorLoveList"
                    :height="`calc(100vh - ${upx2px(80) + state.statusHeight}px)`"
                    @scrolltolower="scrolltolower"
          >
          </loveList>
        </swiper-item>
        <!-- 献花列表 -->
        <swiper-item :style="{
          height: `calc(100vh - ${upx2px(80) + state.statusHeight}px)`
        }">
          <floralPresentationList :floralList="ancestorFlowerList.floralList"
                                  :recordsList="ancestorFlowerList.recordsList"
                                  @scrolltolower="floralScrolltolower"
          ></floralPresentationList>
        </swiper-item>
        <!-- 留言列表 -->
        <swiper-item :style="{
          height: `calc(100vh - ${upx2px(80) + state.statusHeight}px)`
        }">
          <messageList :height="`calc(100vh - ${upx2px(80) + state.statusHeight}px)`"
                       :message-list="ancestorCommentList.list"
          ></messageList>
        </swiper-item>
      </swiper>
    </view>
  </s-layout>

</template>

<script setup>
  import { reactive } from 'vue';
  import SuTabs from '@/sheep/ui/su-tabs/su-tabs.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import LoveList from '@/pages/chineseSurname/components/loveList.vue';
  import FloralPresentationList from '@/pages/chineseSurname/components/floralPresentationList.vue';
  import MessageList from '@/pages/chineseSurname/components/messageList.vue';

  const customBody = () => {
    return {
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
    };
  };
  const itemStyle = () => {
    return {
      'height': '80rpx',
      'line-height': '80rpx',
      'color': 'rgb(41, 41, 41)',
      'font-weight': 'bold',
      'font-size': '36rpx',
    };
  };
  const activeStyle = () => {
    return {
      'color': 'rgb(255,66,6)',
    };
  };
  const inactiveStyle = () => {
    return {
      'color': 'rgb(41, 41, 41)',
    };
  };
  const upx2px = (rpx) => {
    return uni.upx2px(rpx);
  };

  const page = reactive({
    options:{}
  })

  const state = reactive({
    title: '',
    listHeader: [
      { name: '爱心' },
      { name: '献花' },
      { name: '留言' },
    ],
    current: 0,
    statusHeight: sheep.$platform.navbar,
  });
  const pageOptions = reactive({
    id: '',
  });
  // 获取始祖爱心列表参数
  const ancestorLove = reactive({
    page: 1,
    pagesize: 50,
    total: 0,
  });
  // 始祖爱心列表
  const ancestorLoveList = reactive({
    list: [],
  });
  // 获取祭祖鲜花排行参数
  const ancestorFlower = reactive({
    limit: 4,
  });
  // 获取祭祖鲜花列表参数
  const ancestorFlowerRecord = reactive({
    page: 1,
    pagesize: 50,
    total: 0,
  });
  // 祭祖鲜花排行
  const ancestorFlowerList = reactive({
    floralList: [],
    recordsList: [],
  });
  // 获取祭祖评论参数
  const ancestorComment = reactive({
    page: 1,
    pagesize: 50,
    total: 0,
  });
  // 始祖评论列表
  const ancestorCommentList = reactive({
    list: [],
  });

  onLoad((options) => {
    page.options = options
    pageOptions.id = options.id;
    if (!!options.index) {
      state.current = Number(options.index);
    }
    getSurnameDetail();
    getAncestorLove();
    getFlowerRank();
    getFlowerList();
    getAncestorComment();
    uni.$on('messageScrolltolower',()=>{
      messageScrolltolower()
    })
  });

  function onChange(info) {
    state.current = info.index;
  }

  function swiperChange(e) {
    state.current = e.detail.current;
  }

  // 获取始祖详情
  async function getSurnameDetail() {
    const { data } = await sheep.$api.surname.getSurnameDetail({ id: pageOptions.id });
    state.title = data.surname;
  }

  // 获取爱心列表
  async function getAncestorLove() {
    const { data } = await sheep.$api.surname.ancestorLove({
      id: pageOptions.id,
      page: ancestorLove.page,
      pagesize: ancestorLove.pagesize,
    });
    ancestorLove.total = data.count;
    data.list.forEach(item => {
      ancestorLoveList.list.push(item);
    });
  }

  // 获取更多爱心列表
  async function scrolltolower() {
    if (ancestorLove.page * ancestorLove.pageSize < ancestorLove.total) {
      ancestorLove.page++;
      await getAncestorLove();
    }
  }

  // 获取祭祖鲜花排行
  async function getFlowerRank() {
    const { data } = await sheep.$api.surname.getFlowerRank({
      id: pageOptions.id,
      limit: ancestorFlower.limit,
    });
    ancestorFlowerList.floralList = data;
  }

  // 获取献花列表
  async function getFlowerList() {
    const { data } = await sheep.$api.surname.getFlowerList({
      id: pageOptions.id,
      page: ancestorFlowerRecord.page,
      pagesize: ancestorFlowerRecord.pagesize,
    });
    ancestorFlowerRecord.total = data.count;
    data.list.forEach(item => {
      ancestorFlowerList.recordsList.push(item);
    });
  }

  // 获取更多献花列表
  async function floralScrolltolower() {
    if (ancestorFlowerRecord.page * ancestorFlowerRecord.pagesize < ancestorFlowerRecord.total) {
      ancestorFlowerRecord.page++;
      await getFlowerList();
    }
  }

  // 获取祭祖评论
  async function getAncestorComment() {
    const { data } = await sheep.$api.surname.getSurnameComment({
      id: pageOptions.id,
      page: ancestorComment.page,
      pagesize: ancestorComment.pagesize,
    });
    ancestorComment.total = data.count;
    data.list.forEach(item => {
      ancestorCommentList.list.push(item);
    });
  }

  function messageScrolltolower(){
    if(ancestorComment.page * ancestorComment.pagesize < ancestorComment.total){
      ancestorComment.page++
      getAncestorComment()
    }
  }
</script>


<style scoped lang="scss">
  .suTabs {
    ::v-deep .u-tabs {
      background: transparent !important;
      border: none !important;
    }

    /* #ifdef H5 */
    background: transparent !important;
    border: none !important;
    /* #endif */
  }
</style>
